<!DOCTYPE html>
{% load staticfiles %}
<html>

	<head>
		<meta charset="utf-8" />
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="{% static 'css/semantic.css' %}" />
		<link rel="stylesheet" href="{% static 'css/CampusRenting-LandingPage.css' %}" media="screen" title="no title" charset="utf-8">
		<link rel="stylesheet" type="text/css" href="{% static 'css/详情页.css' %}" />
	</head>

	<body>
		<!--<div class="ui fixed inverted grey basic borderless two item mini menu" id="top_menu">
			<div class="item">
				<div class="ui mini image" style="margin-left: -100px;">
					<img src=/static/image/3详情页/logo.png" />
				</div>
				<h2 class="ui header " id="top_left_header">校园租</h2>
			</div>

			<div class="item">
				<a href="#" class="ui header" id="top_right_header">登录</a>
				<div class="ui circular yellow button">
					<div class="ui image">
						<img src=/static/image/3详情页/key_icon.png" />
					</div>
					<a class="header " id="button_inner_text">注册</a>
				</div>
			</div>
		</div>-->

		<div class="ui basic borderless segment" id="nav" style="padding: 0px;">
			<div class="ui inverted grey basic borderless two item mini menu" id="top_menu">
			<div class="item">
				<div class="ui mini image" style="margin-left: -100px;">
					<img src="/static/image/3详情页/logo.png" />
				</div>
				<h2 class="ui header " id="top_left_header">校园租</h2>
			</div>

			<div class="item">
				<a href="#" class="ui header" id="top_right_header">登录</a>
				<div class="ui circular yellow button">
					<div class="ui image">
						<img src="/static/image/3详情页/key_icon.png" />
					</div>
					<a class="header " id="button_inner_text">注册</a>
				</div>
			</div>
		</div>
			<h2 class="ui header" style="position: absolute;margin-left: 220px;margin-top: 40px;color: white;">
				清华东路27号院2居室整租
			</h2>
		</div>

		<div class="ui basic borderless segment" id="middle_content">
			<div class="ui container segment" id="middle_inner_content">
				<div class="ui grid">
					<div class="twelve wide column">
						<div class="ui image">
							<img src="/static/image/3详情页/bigimg.png" />
						</div>
						<div class="ui nine column grid">
							<div class="column" style="margin-left: 14px;">
								<img src="/static/image/3详情页/img1.png" / style="border: 1px solid #fcc416;
border-radius: 5px;">
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img2.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img3.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img2.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img3.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img2.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img3.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img2.png" />
							</div>
							<div class="column">
								<img src="/static/image/3详情页/img3.png" />
							</div>
						</div>
						<div class="ui basic segment container" id="middle_bottom_content">
							<h3 class="ui header">关于此房源</h3>
							<p><b>周边：</b>从北门出，周边生活设施齐全，交通方便，步行10分钟即可到达圣熙八号购物中心，美廉美超市，周六日可以买菜做饭宴请好友；各类饭店应有尽有，医院、学校等生活设施都在附近；紧邻大学，白天蹭课，听讲座、晚上跑步溜达再好不过！弥补大学的美好时光。 </p>
							<br />
							<p><b>交通：</b>步行至地铁15号线六道口站约15分钟；从小区北门出，周边公交线路四通八达，490、392、103、419、913等等，途径北京林业大学、地质大学等著名学府，出行非常方便；四通八达；如果近距离出行可以选择小区门口的市政绿色出行自行车，健康环保！ </p>
						</div>
					</div>
					<div class="four wide column" style="padding-left: 0px;">
						<div class="ui clearing basic segment">
							<h1 class="ui left floated header">3750<h4 class="ui left floated header" >元/月</h4></h1>
							<h4 class="ui right floated header">整租</h4>

						</div>
						<div class="ui basic segment">
							<h3 class="ui header">房屋</h3>
							<p>1室1厅1卫 - 45m<sup>2</sup> - 高层（共6层）</p>
							<p>中等装修 - 朝向南 - 普通住宅</p>
							<h3 class="ui header">地址</h3>
							<p>清华东路27号院</p>
							<p>距北京大学500米</p>
							<h3 class="ui header">小区</h2>
							<p>海淀 - 交通大学 - 德宝新园</p>
						</div>	
						<button class="ui fluid button" id="button_1" style="border-top-left-radius: 0px;border-top-right-radius: 0px;"><h3 class="ui header">我要看房</h3></button>
							<div class="ui basic segment container" style="margin-top: 40px;">
								<h3 class="ui header">设施</h3>
								<ul>
									<li><span>电视</span></li>
									<li><span>网络</span></li>
									<li><span>淋浴</span></li>
									<li><span>空调</span></li>
									<li><span>暖气</span></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--<div class="ui basic segment footer">
				<div class="ui very padded basic segment container" style="padding-top: 0px;">
					<div class="ui four column grid">
						<div class="center aligned column">
							<div class="ui vertical text menu">
								<div class="item">
									<h3 class="ui header">关于我们</h3>
								</div>
								<a class="item">
									常见问题
								</a>
								<a class="item">
									联系我们
								</a>
								<a class="item">
									加入我们
								</a>
							</div>
						</div>
						<div class="center aligned column">
							<div class="ui vertical text menu">
								<div class="item">
									<h3 class="ui header">热门房源</h3>
								</div>
								<a class="item">
									北京大学
								</a>
								<a class="item">
									清华大学
								</a>
								<a class="item">
									人民大学
								</a>
								<a class="item">
									北京邮电
								</a>
							</div>
						</div>
						<div class="center aligned column">
							<div class="ui vertical text menu">
								<div class="item">
									<h3 class="ui header">关注我们</h3>
								</div>
								<a class="item">
									关注微博
								</a>
								<a class="item">
									关注微信
								</a>
								<a class="item">
									关注头条号
								</a>
								<a class="item">
									关注知乎
								</a>
							</div>
						</div>
						<div class="column">
							<div class="ui vertical text menu">
								<div class="item">
									<h3 class="ui header">反馈问题</h3>
								</div>
								<div class="item">
									<p>欢迎写邮件向我们反馈问题</p>
									<p>邮箱地址：</p>
									<p>hi@mugglecoding.com</p>
								</div>
							</div>
						</div>
					</div>
					<div class="ui divider"></div>
					<div class="ui two column grid">
						<div class="column">
							<p style="color:  #979797;">Developed by Mugglecoding team xxx</p>
						</div>
						<div class="right aligned column">
							<p style="color: #979797;">京ICP备15047012号-2</p>
						</div>
					</div>

				</div>

			</div>-->
<!-- - - - - - - - - - - - - - - - - footer - - - - - - - - - - - - - - - - -->
        <div class="ui vertical segment footer">
            <div class="ui container footer">
                <div class="ui grid footer">
                    <!-- firt column -->
                    <div class="four wide column in-footer">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">关于我们</h3>
                            </div>
                            <div class="item in-menu-footer">常见问题</div>
                            <div class="item in-menu-footer">联系我们</div>
                            <div class="item in-menu-footer">加入我们</div>
                        </div>
                    </div>
                    <!-- second column -->
                    <div class="four wide column in-footer" style="padding-left: 31px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">热门房源</h3>
                            </div>
                            <div class="item in-menu-footer">北京大学</div>
                            <div class="item in-menu-footer">清华大学</div>
                            <div class="item in-menu-footer">人民大学</div>
                            <div class="item in-menu-footer">北京邮电</div>
                        </div>
                    </div>
                    <!-- third column -->
                    <div class="four wide column in-footer" style="padding-left: 62px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">关注我们</h3>
                            </div>
                            <div class="item in-menu-footer">关注微信</div>
                            <div class="item in-menu-footer">关注微薄</div>
                            <div class="item in-menu-footer">关注头条号</div>
                            <div class="item in-menu-footer">关注知乎</div>
                        </div>
                    </div>
                    <!-- fourth column -->
                    <div class="four wide column in-footer" style="padding-left: 93px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">反馈问题</h3>
                            </div>
                            <div class="item in-menu-footer" style="line-height: 150%;">
                                欢迎写邮件向我们反馈<br />
                                邮箱地址：<br />
                                hi@mugglecoding.com
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui divider in-footer"></div>
                <div class="text-left in-footer">
                    Developed by Mugglecoding team catcuts
                </div>
                <div class="text-right in-footer">
                    京ICP备15047012号-2
                </div>
            </div>
        </div>
 
	</body>

</html>